import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './Fu_hooks/Fu_Hook_All'
import './SearchNearby.css'
// import { ImageViewer } from 'antd-mobile'


const SearchNearby: React.FC = () => {
    



    const [places, setPlaces] = useState<any[]>([]);
    const [location, setLocation] = useState<string>('115.48896405087316,38.81490135101097'); // 你的位置信息
    const [radius] = useState<number>(1000); // 搜索半径（单位：米）
    const [keyword] = useState<string>('吃喝玩乐'); // 搜索关键词
    const [apiKey] = useState<string>('d5e5552e36c14c71b3aeb4c9beec58f6'); // 高德地图API密钥
    // const [apiKey] = useState<string>('a8bc471894f2722bd67d2c6ab19b0918'); // 高德地图API密钥
    // const [visible, setVisible] = useState(false)

    const fetchPlaces = async () => {
        try {
            //    完整请求
            const url = `https://restapi.amap.com/v3/place/around?key=${apiKey}&location=${location}&radius=${radius}&keywords=${keyword}&output=json`;
            // const url = 'www.baidu.com'
            const response = await axios.get(url);
            if (response.status === 200) {
                setPlaces(response.data.pois); // 将获取到的数据赋值给places                
            } else {
                console.error('请求失败');
            }
        } catch (error) {
            console.error('请求出错', error);
        }
    }
    const [stop, setStop] = useState(true);

    // 鼠标点击地图后，更新位置信息
    const handleMapClick = (event: any) => {
        console.log('点击地图');
        const { lat, lng } = event.latLng;
        setLocation(`${lng},${lat}`);
        setStop(true);
    }





    // 监听
    useEffect(() => {


        if (stop) {
            console.log('开始');
            fetchPlaces();
            setStop(false);
            console.log('结束');
        }
    }, [location, radius, keyword, apiKey]);




    return (
        <div>
            <h2>附近的吃喝玩乐</h2>
            <ul>
                {places.map((place, index) => (
                    <li key={index}>
                        <h3>{place.name}</h3>
                        <p>类型：{place.type}</p>
                        <div className='imgbox' >
                            {place.photos.map((item: any, ids: number) => {
                                return (
                                    <>
                                        {/* <div key={ids}>
                                            <img className='imgcss' src={item.url} alt="" />
                                        </div> */}
                                        <div key={ids} >
                                            <img className='imgcss' src={item.url} alt="" />
                                        </div>
                                        {/* <ImageViewer.Multi
                                            classNames={{
                                                mask: 'customize-mask',
                                                body: 'customize-body',
                                            }}
                                            images={item.url}
                                            visible={visible}
                                            defaultIndex={1}
                                            onClose={() => {
                                                setVisible(false)
                                            }}
                                        /> */}
                                    </>
                                )
                            }
                            )}
                        </div>
                        <p>{place.address}</p>
                        <p>距离当前位置：<span style={{ color: 'red', fontWeight: 'bold' }} >{place.distance} </span>米</p>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default SearchNearby;
